<template>
  <div class="app-container">
    <div id="sjlx">
      <!-- <div>
        <span>数据类型：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="0">bug有效率</el-radio>
          <el-radio :label="1">bug总数</el-radio>
          <el-radio :label="2">bug状态</el-radio>
          <el-radio :label="3">bug解决方案</el-radio>
        </el-radio-group>
      </div> -->

      <!-- <div id="sx">
        <span>筛选条件：</span>
        <div>
          <el-row>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 项目： </el-col>
              <el-col :span="18">
                <el-select
                  @change="pChange"
                  filterable
                  v-model="value[0]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options[0]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 子系统 </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[4]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[4]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 创建人： </el-col>
              <el-col :span="18">
                <el-select
                  v-model="value[1]"
                  filterable
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[1]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 指派人： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[2]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[2]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-row>

          <el-row class="el-row">
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5">创建时间： </el-col>
              <el-col :span="18">
                <el-date-picker
                  style="width: 100%"
                  v-model="tiem"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5">解决时间：</el-col>

              <el-col :span="18">
                <el-date-picker
                  style="width: 100%"
                  v-model="tiem2"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> Bug状态： </el-col>
              <el-col :span="17">
                <el-select
                  filterable
                  v-model="value[3]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[3]"
                    :key="item.status + '' + i"
                    :label="item.status"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 解决方案： </el-col>
              <el-col :span="17">
                <el-select
                  filterable
                  v-model="value[5]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[5]"
                    :key="item.status + '' + i"
                    :label="item.status"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-row>
          <el-row class="el-row">
            <el-col :span="22" style="text-align: right; margin-top: 10px">
              <el-button type="primary" size="medium" @click="next(true)"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div> -->
    </div>

    <div id="data">
      <el-row type="flex" align="middle">
        <el-col :span="3">
          <h3>Bug新建日期分布表</h3>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="tiem"
            type="daterange"
            height="580"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="截至日期"
          >
          </el-date-picker>
        </el-col>

        <el-select
          v-model="valueIt"
          filterable
          clearable
          placeholder="请选择创建人"
        >
          <el-option
            :clearable="true"
            v-for="item in optionsIt"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="BugCreateShowByDate()"
          >搜索</el-button
        >
        <el-button type="primary" size="medium" @click="resetting()"
          >重置</el-button
        >
      </el-row>
      <!-- @sort-change="sortChange" -->
      <el-table height="580" :data="list" border>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <template v-for="(v, i) in this.head">
          <el-table-column
            :key="i + v.prop"
            :prop="v.prop"
            :label="v.label"
            width="120"
            :fixed="v.fixed"
            v-if="v.prop != total"
          >
          </el-table-column>
          <el-table-column
            :key="i + v.prop"
            :prop="v.prop"
            :label="v.label"
            width="120"
            sortable
            v-else
          >
          </el-table-column>
        </template>

        <!--         
        <el-table-column prop="total" label="总数" sortable width="120">
        </el-table-column>
        <el-table-column prop="weekday" label="星期几" width="120">
        </el-table-column>
        <el-table-column prop="Monday" label="星期一" width="120">
        </el-table-column>
        <el-table-column prop="Tuesday" label="星期二" width="120">
        </el-table-column>
        <el-table-column prop="Wednesday" label="星期三" width="120">
        </el-table-column>
        <el-table-column prop="Thursday" label="星期四" width="120">
        </el-table-column>
        <el-table-column prop="Friday" label="星期五" width="120">
        </el-table-column>
        <el-table-column prop="Saturday" label="星期六" width="120">
        </el-table-column>
        <el-table-column prop="Sunday" label="星期日" width="120">
        </el-table-column>
        <el-table-column prop="total" label="Bug创建总数" width="120">
        </el-table-column> -->
      </el-table>

      <el-row type="flex" align="middle">
        <el-col :span="5">
          <h3>Bug新建时间段分布表</h3>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="tiem2"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="截至日期"
          >
          </el-date-picker>
        </el-col>

        <!-- <el-select
          v-model="execP2"
          filterable
          clearable
          placeholder="请选择执行人"
        >
          <el-option
            :clearable="true"
            v-for="(item, i) in optionsExecP"
            :key="i + item.name + i"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select> -->

        <!-- <el-select
          v-model="valueIt2"
          filterable
          clearable
          placeholder="请选择用例类型"
        >
          <el-option
            :clearable="true"
            v-for="(item, i) in optionsIt"
            :key="i + item.type"
            :label="item.type"
            :value="item.type"
          >
          </el-option>
        </el-select> -->
        <el-select
          v-model="valueIt2"
          filterable
          clearable
          placeholder="请选择创建人"
        >
          <el-option
            :clearable="true"
            v-for="item in optionsIt"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="BugCreateTimeSlotShow()"
          >搜索</el-button
        >
        <el-button type="primary" size="medium" @click="resetting2()"
          >重置</el-button
        >
      </el-row>

      <el-table height="800" :data="list2" border>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <template v-for="(v, i) in head2">
          <el-table-column
            :key="v.prop + '' + i"
            :prop="v.prop + ''"
            :label="v.label + ''"
            :fixed="v.fixed"
            width="120"
            v-if="v.label != '总数'"
          >
          </el-table-column>
          <el-table-column
            :key="i + '' + v.prop"
            :prop="v.prop + ''"
            :label="v.label + ''"
            width="120"
            :fixed="v.fixed"
            sortable
            v-else
          >
          </el-table-column>
        </template>

        <el-table-column
          label="用例执行时间段总数"
          prop="total"
          width="150"
        ></el-table-column>
      </el-table>

      <!-- <el-row style="margin-top: 35px">
        <el-col :span="1">
          <el-checkbox @change="handleCheckedCitiesChange"></el-checkbox>
        </el-col>
        <el-col :span="2">
          <strong>严重程度</strong>
        </el-col>
        <el-col :span="3">
          <strong>Bug标题</strong>
        </el-col>
        <el-col :span="3">
          <strong>创建人</strong>
        </el-col>
        <el-col :span="3">
          <strong>创建时间</strong>
        </el-col>
        <el-col :span="3">
          <strong>指派人</strong>
        </el-col>
        <el-col :span="3">
          <strong>解决时间</strong>
        </el-col>
        <el-col :span="3">
          <strong>状态</strong>
        </el-col>
        <el-col :span="2">
          <strong>解决方案</strong>
        </el-col>
      </el-row>
      <hr />
      <el-row
        v-for="(v, i) of Bug_detail_list"
        :key="v.Bug_id"
        style="margin-top: 35px"
      >
        <el-col :span="1">
          <el-checkbox v-model="checked[i]"></el-checkbox>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.Bug_priority }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.Bug_title }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.creator }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.create_date }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.assigner }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.sovled_date }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.Bug_status }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.solve_situation }}</strong>
        </el-col>
      </el-row> -->
      <!-- <div style="margin-top: 20px; text-align: right; padding-right: 55px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageNum"
          :page-sizes="[25, 50, 75, 100]"
          layout="total, sizes,prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import * as bug from "@/api/bug";
import { time } from "echarts";
export default {
  data() {
    return {
      valueIt: "",
      valueIt2: "",
      optionsIt: [],
      options: [],
      value: [],
      radio: 0,
      radio2: 0,
      milestone_verison: "",
      subsystem: "",
      verison_NO: "",
      tester_name: "",
      date_range: "",
      select: null,
      Bug_detail_list: [],
      checked: [],
      tiem: [],
      tiem2: [],
      pageNo: 0,
      total: 0,
      pageNum: 25,
      list: [],
      list2: [],
      head: [],
      head2: [],
    };
  },
  methods: {
    resetting2() {
      this.tiem2 = [];
      this.valueIt2 = "";
    },
    BugCreateTimeSlotShow() {
      let h = [];

      h.push(
        {
          prop: "creator",
          label: "Bug创建人",
          fixed: "fixed",
        },
        {
          prop: "total",
          label: "Bug创建总数",
          fixed: "fixed",
        }
      );

      let params = {
        date_bug_create_start: this.tiem2[0] || "",
        date_bug_create_end: this.tiem2[1] || "",
        creator_name: this.valueIt2,
        // case_type: this.valueIt2,
        // executor_name: this.execP2,
      };
      bug.BugCreateTimeSlotShow(params).then((res) => {
        let arr = [];
        for (let v of res.data.Bug_detail_list) {
          let d = {
            creator: v.creator,
            total: v.total,
          };
          for (let dd of v.data_distribute) {
            d[dd.timeSlot] = dd.num;
          }
          arr.push(d);
        }

        let v = res.data.Bug_detail_list[0].data_distribute;
        console.log("v" + v);
        for (let i = 0; i < v.length; i++) {
          h.push({
            prop: v[i].timeSlot,
            label: v[i].timeSlot,
          });
        }

        this.head2 = h;
        this.list2 = arr;
      });
    },
    resetting() {
      this.time = [];
    },
    pChange(val) {
      if (val) {
        bug.SubsysList("?project_id=" + val).then((res) => {
          this.$set(this.options, 4, res.data.subsys_names);
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.getBugStatistics();
    },
    handleCurrentChange(val) {
      this.pageNo = val - 1;
      this.getBugStatistics();
      console.log(`当前页: ${val}`);
    },

    sortMethod(a, b) {
      return a.localeCompare(b);
    },
    sortChange({ column, prop, order }) {
      this.Bug_detail_list.sort((a, b) => {
        if (order === "ascending") {
          return this.sortMethod(a[prop], b[prop]);
        } else if (order === "descending") {
          return this.sortMethod(b[prop], a[prop]);
        } else {
          return this.sortMethod(a[prop], b[prop]);
        }
      });
    },
    handleCheckedCitiesChange(value) {
      // console.log(this.checked);

      if (value) {
        for (let i in this.Bug_detail_list) {
          this.$set(this.checked, i, true);
        }
      } else {
        for (let i in this.Bug_detail_list) {
          this.$set(this.checked, i, false);
        }
      }
      // console.log(this.checked);
    },
    download() {
      let data = [];
      for (let i in this.checked) {
        if (this.checked[i]) {
          data.push(this.Bug_detail_list[i].Bug_id);
        }
      }

      bug.download({ Bug_ids: data }).then((res) => {
        let blob = res;
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = (e) => {
          let a = document.createElement("a");
          a.download = "bug_file.csv";
          a.href = e.target.result;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        };
      });
    },

    async getBugStatistics() {
      // let v5 = "";
      // switch (this.value[5]) {
      //   case "已修复":
      //     v5 = "fixed";
      //     break;
      //   case "不存在":
      //     v5 = "notrepro";
      //     break;
      //   case "外部原因":
      //     v5 = "external";
      //     break;
      //   case "不予修复":
      //     v5 = "willnotfix";
      //     break;
      //   case "设计如此":
      //     v5 = "bydesign";
      //     break;
      //   case "重复提交":
      //     v5 = "duplicate";
      //     break;
      //   case "待解决":
      //     v5 = "tostory";
      // }
      let data = {
        project_id: this.value[0] || -1,
        creator_name: this.value[1] || "",
        assigner_name: this.value[2] || "",
        Bug_status: this.value[3] || "",
        subsys_id: this.value[4] || "",
        solve_situation: this.value[5],
        date_create_start: this.tiem[0] || "",
        date_create_end: this.tiem[1] || "",
        date_solve_start: this.tiem2[0] || "",
        date_solve_end: this.tiem2[1] || "",
        pageNo: this.pageNo,
        pageNum: this.pageNum,
      };
      let res = await bug.BugStatistics(data);
      if (res.data.Bug_detail_list) {
        this.total = res.data.Bug_total;
        this.Bug_detail_list = res.data.Bug_detail_list;
      }
    },
    next(f) {
      if (f) this.pageNo = 0;
      else this.pageNo++;
      this.getBugStatistics();
    },
    upper() {
      this.pageNo--;
      if (this.pageNo < 0) this.pageNo = 0;
      this.getBugStatistics();
    },

    BugCreateShow() {
      let params = {
        date_bug_create_start: this.tiem[0] || "",
        date_bug_create_end: this.tiem[1] || "",
      };
      bug.BugCreateShow(params).then((res) => {
        this.list = res.data.Bug_detail_list;
      });
    },

    BugCreateShowByDate() {
      let params = {
        date_bug_create_start: this.tiem[0] || "",
        date_bug_create_end: this.tiem[1] || "",
        creator_name: this.valueIt,
      };
      bug.BugCreateShowByDate(params).then((res) => {
        let bdl = [];
        let head = [];

        head.push({ prop: "creator", label: "Bug新建人", fixed: "fixed" });
        head.push({ prop: "total", label: "Bug创建总数", fixed: "fixed" });

        for (let i = 1; i < 32; i++) {
          head.push({ prop: i + "", label: i + "" });
        }
        this.head = head;
        // console.log(this.head);

        for (let v of res.data.Bug_detail_list) {
          let temp = {
            creator: v.creator,
            total: v.total,
          };

          for (let d of v.Bug_create_data_by_date) {
            temp[d.date] = d.num;
          }

          bdl.push(temp);
          // console.log(bdl);
        }

        this.list = bdl;
        // console.log(this.list);
      });
    },
  },
  created() {
    // optionsIt
    bug.optionsIt().then((res) => {
      this.optionsIt = res.data.creator_names;
    });
    setTimeout(() => {
      // this.BugCreateShow();
      this.BugCreateShowByDate();
    }, 2300);

    setTimeout(() => {
      this.BugCreateTimeSlotShow();
    }, 5000);
    // this.getBugStatistics();
    // setTimeout(() => {
    //   bug.projectList().then((res) => {
    //     this.$set(this.options, 0, res.data.project_names);
    //   });
    // }, 1600);
    // setTimeout(() => {
    //   bug.BugResolutionList().then((res) => {
    //     this.$set(this.options, 5, res.data.Bug_status);
    //   });
    // });
    // setTimeout(() => {
    //   bug.creatorList().then((res) => {
    //     this.$set(this.options, 1, res.data.creator_names);
    //   });
    //   bug.SubsysList().then((res) => {
    //     this.$set(this.options, 4, res.data.subsys_names);
    //   });
    // }, 600);
    // setTimeout(() => {
    //   bug.assignerList().then((res) => {
    //     this.$set(this.options, 2, res.data.assigner_names);
    //   });
    //   bug.BugstatusList().then((res) => {
    //     this.$set(this.options, 3, res.data.Bug_status);
    //   });
    // }, 1000);
  },
};
</script>

<style scoped>
#sjlx span {
  margin-right: 30px;
}

#sx {
  margin-top: 20px;
}
#sx .el-row {
  margin: 20px 0;
}

#data {
  margin: 20px 20px;
}
</style>
